<template>
  <div>
    <div class="slider">
      <span>{{ prices }}</span>
      <a-slider
        range
        v-model="price"
        :step="null"
        :marks="marks"
        :min="0"
        :max="11000"
      />
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      prices:'不限',
      price:[0,11000],
      marks: {
        0: 0,
        1000:1000,
        2000: 2000,
        3000:3000,
        4000:4000,
        5000: 5000,
        6000: 6000,
        7000: 7000,
        8000: 8000,
        9000: 9000,
        10000: 10000,
        11000:''
      },
    }
  },
  watch:{
    'price':function (params) {
      if(params[0] === 0 && params[1] === 11000){
        this.prices = '不限'
        return this.$emit('input',[])
      }else if(params[1] >= 11000){
        this.prices = `${params[0]} 以上`
      }else {
        this.prices = `${params[0]}-${params[1]}`
      }
      this.$emit('input',params)
    }
  },
}
</script>

<style lang="less" scoped>

</style>